<template>
	<view class="page">
		<view class="logo">
			<image src="../../static/xxx.jpg" mode="aspectFill"></image>
		</view>
		<view class="login">
			<view class="login-item">
				<uni-easyinput v-model="form.phone" prefixIcon="contact-filled" :styles="styles"
					:placeholderStyle="placeholderStyle" placeholder="手机/邮箱/用户名" />
			</view>
			<view class="login-item login-item_second">
				<uni-easyinput v-model="form.password" class="login-item" :styles="styles"
					:placeholderStyle="placeholderStyle" prefixIcon="locked-filled" type="password" passwordIcon
					placeholder="请输入密码" />
			</view>
		</view>

		<!-- <view class="login-auto">
			<checkbox :value="autoLogin" color="#169BD5" checked="true" />下次自动登录
		</view> -->

		<view class="login-btn">
			<button class="logout-btn" type="primary">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				password: '',
				placeholderStyle: "color:#169BD5;font-size:14px",
				styles: {
					color: '#169BD5',
					borderColor: '#169BD5',
				},
				form: {
					phone: "",
					password: "",
				},
				// 自动登录
				autoLogin: 'false',
				// 多选数据源
				hobbys: [{
					text: '跑步',
					value: 0
				}, {
					text: '游泳',
					value: 1
				}],
			}
		},
		methods: {

		}
	}
</script>

<style style="scss" scoped>
	
	.page {
		padding-top: 20rpx;
		display: flex;
	}
	.logo {
		width: 650rpx;
		height: 350rpx;
		margin: 0 auto 0;
		overflow: hidden;

		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.login {
		margin: 80rpx 80rpx 0;
	}

	.login-item {
		margin-bottom: 50rpx;
	}

	.login-item_second {
		margin-bottom: 20rpx;
	}

	.login-auto {
		margin: 30rpx 80rpx;
	}
	
	.login-btn {
		margin: 80rpx 80rpx 0;
		position: absolute;
		bottom: 20rpx;
		left: 0;
	}
</style>
